<template>
    <div>

      <el-card>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:product:add']"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:product:edit']"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:product:remove']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:product:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>



        <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="商品库存ID" align="center" prop="wpId" />
          <el-table-column label="商品名称" align="center" prop="productName" />
          <!--<el-table-column label="仓库ID" align="center" prop="wid" />-->
          <el-table-column label="当前商品数量" align="center" prop="currentCnt" />
          <el-table-column label="当前占用数据" align="center" prop="lockCnt" />
          <el-table-column label="在途数据" align="center" prop="inTransitCnt" />
          <el-table-column label="移动加权成本" align="center" prop="averageCost" />
          <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:product:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:product:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改商品库存对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="商品ID" prop="productId">
              <el-input v-model="form.productId" placeholder="请输入商品ID" />
            </el-form-item>
            <el-form-item label="仓库ID" prop="wid">
              <el-input v-model="form.wid" placeholder="请输入仓库ID" />
            </el-form-item>
            <el-form-item label="当前商品数量" prop="currentCnt">
              <el-input v-model="form.currentCnt" placeholder="请输入当前商品数量" />
            </el-form-item>
            <el-form-item label="当前占用数据" prop="lockCnt">
              <el-input v-model="form.lockCnt" placeholder="请输入当前占用数据" />
            </el-form-item>
            <el-form-item label="在途数据" prop="inTransitCnt">
              <el-input v-model="form.inTransitCnt" placeholder="请输入在途数据" />
            </el-form-item>
            <el-form-item label="移动加权成本" prop="averageCost">
              <el-input v-model="form.averageCost" placeholder="请输入移动加权成本" />
            </el-form-item>
            <!--<el-form-item label="最后修改时间" prop="modifiedTime">-->
              <!--<el-date-picker clearable size="small" style="width: 200px"-->
                              <!--v-model="form.modifiedTime"-->
                              <!--type="date"-->
                              <!--value-format="yyyy-MM-dd"-->
                              <!--placeholder="选择最后修改时间">-->
              <!--</el-date-picker>-->
            <!--</el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>


      </el-card>

    </div>
</template>

<script>

  import { listProduct, getProduct, delProduct, addProduct, updateProduct, exportProduct } from "@/api/order/product";
  import { listInfo, getInfo } from "@/api/order/warehouse";

  export default {
        name: "waproduct",
    data(){
          return{
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商品库存表格数据
            productList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              productId: null,
              wid: null,
              currentCnt: null,
              lockCnt: null,
              inTransitCnt: null,
              averageCost: null,
              modifiedTime: null
            },
            // 表单参数
            form: {},
            defaultDictType:""
          }
    },

    created() {
      const wid = this.$route.params && this.$route.params.wid;
          this.getInfo(wid);

    },
    methods: {

      getInfo(wid){
        getInfo(wid).then(res=>{
          this.queryParams.wid = res.data.wid;
          this.defaultDictType = res.data.wid;
          this.getList();
        })
      },


      /** 查询商品库存列表 */
      getList() {
        this.loading = true;
        listProduct(this.queryParams).then(response => {
          this.productList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          wpId: null,
          productId: null,
          wid: null,
          currentCnt: null,
          lockCnt: null,
          inTransitCnt: null,
          averageCost: null,
          modifiedTime: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.wpId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加商品库存";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const wpId = row.wpId || this.ids
        getProduct(wpId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商品库存";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.wpId != null) {
              updateProduct(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addProduct(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const wpIds = row.wpId || this.ids;
        this.$confirm('是否确认删除商品库存编号为"' + wpIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delProduct(wpIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有商品库存数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportProduct(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
      }
    }

    }
</script>

<style scoped>

</style>
